<template>
	<div :class="curClassName" :style="curStyle" @click="handleClick">
		<!-- 直接内容类型 -->
		<template v-if="Object.is(contentType, 'RAW')">
            <span :class="contentClass" :style="contentStyle">{{ content }}</span>
		</template>
		<!-- 图片类型 -->
		<template v-else-if="Object.is(contentType, 'IMAGE')">
			<img :class="contentClass" :style="contentStyle" v-if="imagePath" :src="imagePath" />
			<i :style="contentStyle" v-else :class="[contentClass,cssClass]"></i>
		</template>
		<!-- HTML类型 -->
		<template v-else-if="Object.is(contentType, 'HTML')">
			<div :class="contentClass" :style="contentStyle" v-html="content" />
		</template>
		<!-- MARKDOWN类型 -->
		<template v-else-if="Object.is(contentType, 'MARKDOWN')">
			{{ $t('layoutElement.text.markdownnotsupport', 'MARKDOWN暂未支持') }}
			<!-- <app-markdown-editor :style="contentStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
		</template>
	</div>
</template>
<script setup lang="ts">
import { IEvent } from '@/core';
import { format } from '@/core';
import { PresetTextProps } from './preset-text';

const props = defineProps(PresetTextProps);
interface PresetTextEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<PresetTextEmit>();
/**
 * 项名称
 *
 * @memberof AppPresetText
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 图片路径
 *
 * @memberof AppPresetText
 */
const imagePath = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let imagePath = '';
		if (layoutModel.sysImage) {
			imagePath = layoutModel.sysImage.imagePath;
		}
		return imagePath;
	}
});

/**
 * 图标
 *
 * @memberof AppPresetText
 */
const cssClass = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let cssClass = '';
		if (layoutModel.sysImage) {
			cssClass = layoutModel.sysImage.iconcls;
		}
		return cssClass;
	}
});

/**
 * 内容类型
 *
 * @memberof AppPresetText
 */
const contentType = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.contentType || 'RAW';
	}
});

/**
 * 绘制模式
 *
 * @memberof AppPresetText
 */
const renderMode = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.renderMode == 'TEXT_DYNAMIC'
			? 'TEXT'
			: layoutModel.renderMode;
	}
});

/**
 * 当前容器样式类
 *
 * @memberof AppPresetText
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-preset-text': true,
	};
	if (layoutModel) {
		Object.assign(classNames, {
			[`app-preset-text--${contentType.value.toLowerCase()}`]: true
		});
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 当前容器样式
 *
 * @memberof AppPresetText
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 内容
 *
 * @memberof AppPresetText
 */
const content = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	let content = props.value;
	if(layoutModel && layoutModel.valueFormat){
		content = format.format(content,layoutModel.valueFormat);
	}
	if (
		layoutModel &&
		layoutModel.predefinedType &&
		layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC'
	) {
		if (contentType.value == 'RAW') {
			content = layoutModel.rawContent;
		} else if (contentType.value == 'HTML') {
			content = layoutModel.htmlContent;
			const items = content.match(/\{{(.+?)\}}/g);
			if (items) {
				items.forEach((item: string) => {
					content = content.replace(
						/\{{(.+?)\}}/,
						eval(item.substring(2, item.length - 2))
					);
				});
			}
			content = content.replaceAll('&lt;', '<');
			content = content.replaceAll('&gt;', '>');
			content = content.replaceAll('&amp;nbsp;', ' ');
			content = content.replaceAll('&nbsp;', ' ');
		}
	}
	return content;
});

/**
 * 内容样式
 *
 * @memberof AppPresetText
 */
const contentStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let contentStyle = layoutModel.contentStyle;
		return contentStyle;
	}
});

/**
 * 内容class
 *
 * @memberof AppPresetText
 */
const contentClass = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		const classNames = {};
		if (layoutModel.predefinedType === 'STATIC_LABEL') {
			Object.assign(classNames, { textellipsis: true });
		}
		return contentStyle;
	}
});

/**
 * 当前值
 * @param $event
 * @memberof AppPresetText
 */
 const handleClick = ($event:any) => {
	emit('component-action', {
		name: props.name,
		action: 'panelItemClick',
		data: $event,
	});
}
</script>
